<template>
    <div class="app-container">
        <!-- 搜索模块 -->
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="所属模板" prop="budget_id">
                <el-select v-model="queryParams.budget_id" placeholder="所属模板" size="small" style="width: 240px">
                    <el-option v-for="dict in codeOptions" :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue">
                        <span style="float: left">{{ dict.dictLabel }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictLabelName }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="井名" prop="name">
                <el-input v-model="queryParams.wellName" placeholder="井名" size="small" style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            
            <el-form-item label="日期范围" prop="dateRange">
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开钻日期"
                    end-placeholder="完井日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 图标模块 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button v-hasPermi="['admin:budget:channel:detail:download:post']" type="warning" plain icon="el-icon-download"
                    size="mini" @click="handleDownload">数据导出</el-button>
            </el-col>
            <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
        </el-row>
        <!-- 展示 -->
        <dynamic-table ref="dynamicTable" :table-data="tableRowData" :table-header="tableColData" :table-total="tableTotal"
            v-loading="loading" :selection="false" @dynamicMultiplePaging_="dynamicMultiplePaging"></dynamic-table>
    </div>
</template>

<script>
import DynamicTable from "@/components/MultistageHeader/index";
import { modelToDict } from "@/api/vadmin/budget/formwork/formworkapi";
import { Decrypt, Encrypt, HmacMD5 } from "@/utils/AesHmacMD5";
import { AccurateType, downloadType } from "@/api/vadmin/budget/channel/dataapi";

export default {
    name: 'accurate',
    components: { DynamicTable },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,  // 当前页数
                pageSize: 10,  // 每页显示几个
                wellName: undefined,
                budget_id: undefined,
                accurate: true
            },
            // 模板列表
            codeOptions: [],
            // 日期范围
            dateRange: [],
            // 表头
            tableColData: [],
            // 表内容
            tableRowData: [],
            // 所有表内容
            tableRowDataSum: [],
            // 数据总量
            tableTotal: 0,
        }
    },
    created() {
        // 模板数据查询
        this.getformData()
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.queryParams = {
                pageNum: 1,  // 当前页数
                pageSize: 10,  // 每页显示几个
                wellName: undefined,
                budget_id: this.codeOptions[0].dictValue
            },
                this.handleQuery();
        },
        // 刷新Table表格
        async refresh() {
            this.$refs.dynamicTable.itemKey = this.$refs.dynamicTable.itemKey + 1
        },
        // 分页查询
        dynamicMultiplePaging(val) {
            this.queryParams.pageNum = val.pageNum
            this.queryParams.pageSize = val.pageSize
            this.handlePaging()
            this.refresh()
        },
        // 查询模板数据【转字典】
        getformData() {
            modelToDict().then(response => {
                this.codeOptions = JSON.parse(Decrypt(response.data))
                this.queryParams.budget_id = this.codeOptions[0].dictValue
                this.getList()
            });
        },
        // 获取模板表头
        getList() {
            this.loading = true
            AccurateType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                var resData = JSON.parse(Decrypt(response.data))
                this.tableColData = resData.tableColData;
                this.tableRowDataSum = resData.tableRowData
                this.handlePaging()
                this.tableTotal = resData.tableTotal
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },

        /** 文件下载 **/
        handleDownload(row) {
            downloadType({"tableRowData": this.tableRowDataSum, "budget_id": this.queryParams.budget_id}).then((response) => {
                var item = JSON.parse(Decrypt(response.data))
                this.download(item.path, item.name);
            })
        },

        /** 分页 */
        handlePaging(){
            var pageStart = (this.queryParams.pageNum - 1) * this.queryParams.pageSize

            this.tableRowData = this.tableRowDataSum.slice(pageStart, pageStart+this.queryParams.pageSize)
        }
    }
}
</script>